<script setup lang="ts">
import { delEnterpriseAPI, getAllList } from '@/apis/card';
import ChannleList from '@/components/channleList.vue';
import type { ArticleDetail, reqParams } from '@/types/user';
import { DeleteFilled, EditPen } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref } from 'vue';


const radio = ref<reqParams>({
  status: null,
  channel_id: null,
  page: 1,
  per_page: 10,
  end_pubdate: null,
  begin_pubdate: null,
})
// 总条数
const total = ref(0)
// 日期范围
const dateArr = ref([])

// 文章列表
const formList = ref<ArticleDetail[]>([])
// 获取文章列表
const channelsList = async()=>{
  const res = await getAllList(radio.value)
  // console.log('res',res);
  formList.value = res.data.data.results
  // console.log('formList.value',formList.value);
  total.value = res.data.data.total_count
}
channelsList()

// 选择日期
const changeDate = (dateArr:string[])=>{
  if (dateArr) {
    radio.value.begin_pubdate = dateArr[0]
    radio.value.end_pubdate = dateArr[1]
  } else {
    radio.value.begin_pubdate = ''
    radio.value.end_pubdate = ''
  }
}
// 筛选文章
const filterArticle = ()=>{
  radio.value.page = 1
  // 在做筛选的时候从第一页开始
  // 获取文章前，收集筛选条件
  // 1. 状态，频道，是自动收集的
  // 2. 日期范围需要手动收集
  channelsList()
}

// 切换分页
const changePager = (newPage:number)=>{
  radio.value.page = newPage
  channelsList()
}

//删除
const deleteArticle = (id:string)=>{
  // 删除属于危险操作，需要二次弹窗确认
  ElMessageBox.confirm(
    '是否删除该内容?',
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async()=>{
    // 发送请求，删除后端的数据
    await delEnterpriseAPI(id)
    // 轻提示
    ElMessage.success('删除成功')
    // 重新请求数据
    channelsList()
  }).catch(()=>{})
}

</script>

<template>
  <el-card shadow="always">
    <template #header>
      <el-breadcrumb>
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
      </el-breadcrumb>
    </template>
    <!-- 主体是表单 -->
    <el-form>
      <el-form-item label="状态：" prop="status">
        <el-radio-group v-model="radio.status">
          <el-radio :label="null">全部</el-radio>
          <el-radio :label="0">草稿</el-radio>
          <el-radio :label="1">待审核</el-radio>
          <el-radio :label="2">审核通过</el-radio>
          <el-radio :label="3">审核失败</el-radio>
          <el-radio :label="4">已删除</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="频道：">
        <ChannleList v-model="radio.channel_id"/>
      </el-form-item>
      <el-form-item label="日期：" style="width: 400px">
        <el-date-picker
        @change="changeDate"
        v-model="dateArr"
        value-format="YYYY-MM-DD"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        clearable/>

      </el-form-item>
      <el-form-item label="">
        <el-button @click="filterArticle()" type="primary">筛选</el-button>
      </el-form-item>
      {{ radio }}
    </el-form>
  </el-card>

  <el-card class="table-card">
    <template #header>
      <div>根据筛选条件共查询到 {{ total }} 条结果：</div>
    </template>
    <!-- 表格 -->
    <el-table :data="formList">
      <el-table-column label="封面" prop="cover">
        <template v-slot="scope">
            <el-image
             :src="scope.row.cover.images[0]"
             :preview-src-list="scope.row.cover.images"
             style="width:180px;height:120px"
             :preview-teleported="true"
            >
              <template #error>
                <img src="../../assets/error.png" style="width:180px;height:120px" alt="">
              </template>
            </el-image>
          </template>
      </el-table-column>
      <el-table-column label="标题" prop="title"></el-table-column>
      <el-table-column label="状态" prop="status">
        <template v-slot="scope">
            <el-tag v-if="scope.row.status===0" type="info">草稿</el-tag>
            <el-tag v-if="scope.row.status===1">待审核</el-tag>
            <el-tag v-if="scope.row.status===2" type="success">审核通过</el-tag>
            <el-tag v-if="scope.row.status===3" type="warning">审核失败</el-tag>
            <el-tag v-if="scope.row.status===4" type="danger">已删除</el-tag>
          </template>
      </el-table-column>
      <el-table-column label="发布时间" prop="pubdate"></el-table-column>
      <el-table-column label="阅读数" prop="read_count"></el-table-column>
      <el-table-column label="评论数" prop="comment_count"></el-table-column>
      <el-table-column label="点赞数" prop="like_count"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
            <el-button @click="$router.push(`/publish?id=${scope.row.id}`)" type="primary" circle plain><el-icon><EditPen /></el-icon></el-button>
            <el-button @click="deleteArticle(scope.row.id)" type="danger" circle plain><el-icon><DeleteFilled /></el-icon></el-button>
          </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page-container">
      <el-pagination
      style="margin-top: 20px;"
      @current-change="changePager"
        layout="total, prev, pager, next,sizes,jumper"
        :page-sizes="[2, 5, 10, 20, 100]"
        :total="1" />
    </div>
  </el-card>
</template>

<style lang="less" scoped>
.table-card{
  margin-top: 20px;
}
.page-container {
  padding: 4px 0px;
  display: flex;
  justify-content: end;
  text-align: right;
}
</style>
